<template>
<!-- 左侧主体菜单 -->
<div class="menu-wrapper">
    <Menu ref="topMenu" :active-name="activeName" theme="dark" width="auto" :class="menuitemClasses" @on-select="onMenuSelected">
        <div v-for="(item, index) in menuList" :key="index">
            <MenuItem :name="item.url" :disabled="alarmShow">
                <span v-if="!collapsed">
                    <i :class="item.icon"></i>
                    <span>{{item.name}}</span>
                </span>
                <Tooltip :content="item.name" placement="right" v-else>
                    <i :class="item.icon"></i>
                </Tooltip>
            </MenuItem>
            <div :class="item.line ? 'menu-line':''"></div>
        </div>
    </Menu>
    <Menu ref="bottomMenu" class="bottom-menu" :active-name="bottomMenuActiveName" theme="dark" width="100%" :class="menuitemClasses" @on-select="onBottomMenuClick">
        <!-- <MenuItem name="alarm" ref="alarmMenu">
            <span v-if="!collapsed">
                <i class="zlstbd-icon-news"></i>
                <span>告警中心 <div class="alarm-dot m-l-10" v-if="alarmCount > 0"></div></span>
            </span>
            <Tooltip content="告警中心" placement="right" v-else>
                <i class="zlstbd-icon-news"></i><div class="alarm-dot m-l-10" v-if="alarmCount > 0"></div>
            </Tooltip>
        </MenuItem> -->
        <MenuItem name="quit">
            <span v-if="!collapsed">
                <i class="zlstbd-icon-quit"></i>
                <span>退出</span>
            </span>
            <Tooltip content="退出" placement="right" v-else>
                <i class="zlstbd-icon-quit"></i>
            </Tooltip>
        </MenuItem>
    </Menu>
</div>
</template>

<script>
import getData          from 'getData'
import { mapGetters }   from 'vuex'
import {ZLST_WEB_LOCATION} from '@/api/service/config.js'

export default {
    props: {
        menuList: {
            type: Array
        }
    },

    computed: {
        ...mapGetters(['alarmShow', 'collapsed']),

        menuitemClasses() {
            return [
                    'menu-item',
                    this.collapsed ? 'collapsed-menu' : ''
                ];
        },
        activeName() {
            for (let index = 0; index < this.menuList.length; index++) {
                const element = this.menuList[index];
                var reg = new RegExp(this.$route.path);
                if (this.$route.path.match(element.url)) {
                    this.$store.commit('setActiveMenu', element);
                    return element.url;
                }
            }
            return '';
        },
    },

    watch: {
        alarmShow(val) {
            if (!val) {
                this.$nextTick(() => {this.$refs.bottomMenu.currentActiveName = ''});
            }
        },
        activeName(val) {
            this.$nextTick(() => {
                this.$refs.topMenu.updateActiveName();
            })
        }
    },

    data () {
        return {
            alarmCount: 0,
            bottomMenuActiveName: ''
        }
    },

    methods: {
        onMenuSelected(url) {
            this.$router.push({
                path: url
            });
            this.bottomMenuActiveName = '';
        },
        onBottomMenuClick(name) {
            switch (name) {
                case 'alarm':
                    this.$emit('onAlarmClick');
                    return;
                case 'quit':
                    this.logout();
                    return;
            }
        },
        queryAlarmCount() {
            getData.get('querySysMsgNum').then(res => {
                if (res.status == 200 && res.data.code == '000') {
                    this.alarmCount = res.data.data;
                } else {
                    console.error('Get alarm count faild: ' + res);
                }
            })
        },
        logout() {
            this.$Modal.confirm({
                title: '退出',
                content: '确定退出系统？',
                onOk: ()=> {
                    getData.get('logout').then(res => {
                        if (res.status == 200 && res.data.code == '000') {
                            window.location.href = ZLST_WEB_LOCATION.LOGIN_URL;
                        }
                    })
                },
                onCancel: () => {
                    this.$refs.bottomMenu.currentActiveName = '';
                }
            })
        }
    },

    mounted () {
        // this.queryAlarmCount(); //查询告警数量
        // setInterval(()=>{this.queryAlarmCount()}, 30000); //之后每30s查询告警数量
    }
}
</script>

<style lang="less">
.menu-wrapper {
    position: relative;
    height: calc(~ '100vh - 248px');;
    .menu-item span{
        display: inline-block;
        overflow: hidden;
        width: 128px;
        text-overflow: ellipsis;
        white-space: nowrap;
        vertical-align: bottom;
        transition: width .2s ease .2s;
    }
    .menu-item i{
        transform: translateX(0px);
        transition: font-size .2s ease, transform .2s ease;
        vertical-align: middle;
        font-size: 20px;
    }

    .collapsed-menu span{
        width: 0px;
        transition: width .2s ease;
    }
    .collapsed-menu i{
        transform: translateX(5px);
        transition: font-size .2s ease .2s, transform .2s ease .2s;
        vertical-align: middle;
        font-size: 18px;
        text-align: center;
    }
    .menu-line {
        margin: 8px auto;
        width: 184px;
        border-bottom: 1px dashed #ffffff;
        opacity:0.2;
    }
    .bottom-menu {
        position: absolute;
        bottom: 0;
    }
}
</style>

